<template>
	<!-- 我的-我的服务-优惠券 -->
	<view class="coupon public">
		<view class="title-nav flexjcsb">
			<view class="title-nav-item flexjcc" v-for="(item, index) in titleNav" :key="index" @click="tabswitch(index)">
				<view :class="num == index ? 'SelectedStyle' : ''">{{ item }}</view>
			</view>
		</view>
		<view class="main" v-if="arr.length > 0">
			<view class="" v-show="num == 0">
				<whole :arr="arr"></whole>
			</view>
			<view class="" v-show="num == 1">
				<notUsed :arr="arr"></notUsed>
			</view>
			<view class="" v-show="num == 2">
				<Used :arr="arr"></Used>
			</view>
			<view class="" v-show="num == 3">
				<Expired :arr="arr"></Expired>
			</view>
		</view>
		<template v-else>
			<view>
				<image style="width: 750rpx;height: 750rpx;"
					src="https://img.zcool.cn/community/01d29258cce264a801219c77ec3f60.png" mode=""></image>
			</view>
		</template>
	</view>
</template>

<script>
import whole from "../../../../pages_my/components/giveServiceTo/coupon/whole.vue"
import notUsed from "../../../../pages_my/components/giveServiceTo/coupon/notUsed.vue";
import Used from "../../../../pages_my/components/giveServiceTo/coupon/Used.vue";
import Expired from "../../../../pages_my/components/giveServiceTo/coupon/Expired.vue";
const $api = require('@/utils/request.js').API
export default {
	components: {
		whole,
		notUsed,
		Used,
		Expired,
	},
	data() {
		return {
			num: 0,
			titleNav: ["全部", "未使用", "已使用", "已过期"],
			arr: [],
		};
	},
	onLoad() {
		this.couponAssemble()
	},
	methods: {
		couponAssemble(state) {
			$api.postCouponAssemble({
				state: state
			}).then(res => {
				this.arr = res.data.data.list
			})
		},
		tabswitch(index) {
			this.num = index;
			if (this.num === 0) {
				this.couponAssemble()
			} else if (this.num === 1) {
				this.couponAssemble(1)
			} else if (this.num === 2) {
				this.couponAssemble(2)
			} else if (this.num === 3) {
				this.couponAssemble(3)
			}
		},
	},
};
</script>

<style lang="less" scoped>
// 选中样式
.SelectedStyle {
	height: 106rpx;
	color: #f14500;
	border-bottom: 2px solid #f14500;
	line-height: 106rpx;
}

.coupon {
	background: #f9f9f9;

	.couponBack {
		width: 708rpx;
		height: 208rpx;
		background-image: url('../../../../static/my/giveServiceTo/Used.png');
		background-size: 100% 100%;
		margin: auto;
	}

	.title-nav {
		width: 750rpx;
		height: 106rpx;
		background: white;

		.title-nav-item {
			// height: 100%;
			padding-left: 46rpx;
			padding-right: 30rpx;
		}
	}

	// .main {
	// 	.main-item {
	// 		.centent {
	// 			width: 100%;
	// 			height: 100%;

	// 			// 门槛
	// 			.threshold {
	// 				width: 200rpx;
	// 				text-align: center;
	// 				font-size: 27rpx;
	// 				font-family: PingFang SC;
	// 				font-weight: 400;
	// 				// color: #836220;
	// 				color: #BDBDBD;
	// 				border-right: 2px dashed #D2D2D2;

	// 				view:first-child {
	// 					text {
	// 						font-size: 67rpx;
	// 						font-family: PingFang SC;
	// 						font-weight: 400;
	// 						// color: #836220;
	// 						color: #BDBDBD;
	// 					}
	// 				}

	// 				// view:last-child {
	// 				// 	color: #f14500;
	// 				// 	text-align: center;
	// 				// }

	// 				.preferentialThreshold {
	// 					// color: #8a6928 !important;
	// 					color: #BDBDBD;
	// 					// color: #f14500;
	// 					text-align: center;
	// 				}
	// 			}

	// 			// 指定
	// 			.certificate {
	// 				.certificate-title {
	// 					font-size: 32rpx;
	// 					font-family: PingFang SC;
	// 					font-weight: 400;
	// 					// color: #000000;
	// 					color: #BDBDBD;
	// 					padding-bottom: 20rpx;
	// 				}

	// 				.certificate-date {
	// 					font-size: 24rpx;
	// 					font-family: PingFang SC;
	// 					font-weight: 400;
	// 					// color: #836220;
	// 					color: #BDBDBD;

	// 					.wavyLine {
	// 						padding: 0 6rpx;
	// 					}
	// 				}
	// 			}

	// 			// 状态
	// 			.centent-status {
	// 				display: flex;
	// 				justify-content: center;
	// 				align-items: center;
	// 				width: 110rpx;
	// 				height: 100%;
	// 				font-size: 26rpx;
	// 				font-family: PingFang SC;
	// 				font-weight: 400;
	// 				color: #ffffff;
	// 				text-shadow: 0rpx 1rpx 1rpx rgba(182, 140, 255, 0.5);
	// 			}
	// 		}
	// 	}
	// }
}
</style>